<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业积分助手</title>
    <meta name="theme-color" content="#22c55e">
    <link rel="apple-touch-icon" sizes="180x180" href="static/images/favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="static/images/favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="static/images/favicon/favicon-16x16.png">
    <link rel="manifest" href="static/images/favicon/site.webmanifest">
    <!-- 使用本地Tailwind CSS，避免CDN依赖 -->
    <link rel="stylesheet" href="static/css/tailwind.min.css">
    <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"> -->
    <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css"> -->
    <!-- 使用本地Font Awesome，避免CDN超时问题 -->
    <link rel="stylesheet" href="static/css/font-awesome.local.css">
    <!-- <link rel="stylesheet" href="static/css/font-awesome.min.css"> -->
    <link rel="icon" href="static/images/favicon/favicon.ico" type="image/x-icon">
    <style>
        body {            
            background-color: #f8fafc;            
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
            margin: 0;
            padding: 0;
        }
        .nav-item-active {
            color: #22c55e;
            border-bottom: 2px solid #22c55e;
        }
        .card-shadow {
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        }
        .floating-btn {
            position: fixed;
            bottom: 70px;
            right: 20px;
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background-color: #22c55e;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            box-shadow: 0 4px 14px rgba(34, 197, 94, 0.4);
            transition: all 0.3s ease;
        }
        .floating-btn:active {
            transform: scale(0.95);
        }
        .task-card {
            transition: all 0.2s ease;
            margin-bottom: 0.75rem;
        }
        .task-card:active {
            background-color: #f3f4f6;
        }
        .tomato-bubble {
            position: fixed;
            bottom: 140px;
            right: 16px;
            width: 70px;
            height: 70px;
            border-radius: 50%;
            background-color: rgba(34, 197, 94, 0.8);
            color: white;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            box-shadow: 0 4px 14px rgba(34, 197, 94, 0.4);
            backdrop-filter: blur(4px);
        }
        /* 操作记录弹窗样式 */
        #operation-logs-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 50;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .operation-logs-content {
            max-width: 95%;
            max-height: 85%;
            width: 100%;
            background: white;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: column;
        }
        
        #operation-logs-container {
            flex: 1;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }
        
        #operation-logs-container::-webkit-scrollbar {
            width: 4px;
        }
        
        #operation-logs-container::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 2px;
        }
        
        #operation-logs-container::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 2px;
        }
        
        #operation-logs-container::-webkit-scrollbar-thumb:hover {
            background: #555;
        }
    </style>
</head>
<body class="h-screen overflow-hidden">
    <!-- 登录页面 -->
    <div id="login-page" class="min-h-screen flex flex-col items-center justify-center p-4">
        <div class="w-full max-w-md bg-white rounded-lg shadow-lg p-5">
            <h1 class="text-2xl font-bold text-center text-green-600 mb-6">作业与积分小程序</h1>
            <div id="login-form">
                <div class="mb-4">
                    <label class="block text-gray-700 mb-2">用户名</label>
                    <input type="text" id="login-username" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500">
                </div>
                <div class="mb-6">
                    <label class="block text-gray-700 mb-2">密码</label>
                    <input type="password" id="login-password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500">
                </div>
                <div class="mb-4 flex items-center">
                    <input type="checkbox" id="login-remember" class="mr-2">
                    <label for="login-remember" class="text-gray-700">记住我</label>
                </div>
                <button id="login-btn" class="w-full bg-green-600 text-white py-2 rounded-lg hover:bg-green-700 transition-colors">登录</button>
                <div class="text-center mt-4">
                    <span class="text-gray-600">还没有账号？</span>
                    <button id="go-register" class="text-green-600 ml-1">立即注册</button>
                </div>
            </div>
            <div id="register-form" class="hidden">
                <div class="mb-4">
                    <label class="block text-gray-700 mb-2">用户名</label>
                    <input type="text" id="register-username" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500">
                </div>
                <div class="mb-4">
                    <label class="block text-gray-700 mb-2">密码</label>
                    <input type="password" id="register-password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500">
                </div>
                <div class="mb-6">
                    <label class="block text-gray-700 mb-2">确认密码</label>
                    <input type="password" id="confirm-password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500">
                </div>
                <button id="register-btn" class="w-full bg-green-600 text-white py-2 rounded-lg hover:bg-green-700 transition-colors">注册</button>
                <div class="text-center mt-4">
                    <span class="text-gray-600">已有账号？</span>
                    <button id="go-login" class="text-green-600 ml-1">返回登录</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 主应用页面 -->
    <div id="app" class="hidden h-screen flex flex-col">
        <!-- 页面标题区域 -->
    <div id="page-header" class="py-3 px-4 bg-white border-b border-green-100">
            <!-- 作业打卡页面标题 -->
            <div id="task-page-header" class="flex items-center justify-between">
                <div class="flex items-center">
                    <img id="task-page-avatar" src="static/images/avatars/default.svg" alt="用户头像" class="w-9 h-9 rounded-full mr-2 border-2 border-green-500">
                    <h1 id="task-page-title" class="text-lg font-bold text-green-600">作业打卡</h1>
                </div>
                <div id="user-gold-display" class="flex items-center text-yellow-500">
                    <i class="fa fa-star mr-1"></i>
                    <span id="total-gold" class="font-bold">0</span>
                </div>
            </div>
            
            <!-- 小心愿页面标题 -->
            <div id="wish-page-header" class="hidden">
                <h1 id="wish-page-title" class="text-xl font-bold text-green-600 text-center">用户昵称的心愿收集</h1>
            </div>
            
            <!-- 我的页面标题 -->
            <div id="profile-page-header" class="hidden text-center">
                <div class="flex flex-col items-center">
                    <img id="profile-avatar" src="static/images/avatars/default.svg" alt="用户头像" class="w-16 h-16 rounded-full mb-2 border-2 border-green-500">
                    <h1 id="profile-title" class="text-xl font-bold text-green-600">个人中心</h1>
                    <p id="profile-username" class="font-medium text-gray-700"></p>
                    <p id="profile-account-type" class="text-xs text-blue-600 hidden"></p>
                    <p id="profile-id" class="text-sm text-gray-500">ID: 000000</p>
                </div>
            </div>
        </div>
        
        <!-- 顶部统计栏 -->
        <div id="statistics-bar" class="bg-gradient-to-r from-green-50 to-blue-50 p-3 border-b border-green-100">
            <div class="grid grid-cols-4 gap-1 text-center">
                <div class="bg-white rounded-lg p-2 shadow-sm">
                    <div class="text-purple-500 mb-1 text-lg"><i class="fa fa-clock-o"></i></div>
                    <div class="text-gray-500 text-xs">日时长</div>
                    <div id="day-time" class="text-purple-600 font-bold text-sm">0分钟</div>
                </div>
                <div class="bg-white rounded-lg p-2 shadow-sm">
                    <div class="text-blue-500 mb-1 text-lg"><i class="fa fa-tasks"></i></div>
                    <div class="text-gray-500 text-xs">任务数</div>
                    <div id="task-count" class="text-blue-600 font-bold text-sm">0个</div>
                </div>
                <div class="bg-white rounded-lg p-2 shadow-sm">
                    <div class="text-yellow-500 mb-1 text-lg"><i class="fa fa-money"></i></div>
                    <div class="text-gray-500 text-xs">日金币</div>
                    <div id="day-gold" class="text-yellow-600 font-bold text-sm">0</div>
                </div>
                <div class="bg-white rounded-lg p-2 shadow-sm">
                    <div class="text-green-500 mb-1 text-lg"><i class="fa fa-check-circle"></i></div>
                    <div class="text-gray-500 text-xs">完成率</div>
                    <div id="completion-rate" class="text-green-600 font-bold text-sm">0%</div>
                </div>
            </div>
        </div>

        <!-- 内容区域 -->
        <div id="content" class="flex-1 p-3 pb-20 main-content overflow-y-auto min-h-0">
            <!-- 作业打卡页面 -->
            <div id="task-page">
                <!-- 日期选择器 -->
                <div class="flex items-center justify-between mb-3">
                    <div class="flex items-center justify-between w-full">
                        <button id="prev-week" class="text-green-600 p-1">
                            <i class="fa fa-chevron-left"></i>
                        </button>
                        <h2 id="current-week" class="text-base text-gray-800">2025年10月第41周</h2>
                        <button id="next-week" class="text-green-600 p-1">
                            <i class="fa fa-chevron-right"></i>
                        </button>
                    </div>
                </div>
                <div class="px-2">
                    <div class="flex justify-between mt-3">
                        <span class="text-xs text-gray-500">一</span>
                        <span class="text-xs text-gray-500">二</span>
                        <span class="text-xs text-gray-500">三</span>
                        <span class="text-xs text-gray-500">四</span>
                        <span class="text-xs text-gray-500">五</span>
                        <span class="text-xs text-gray-500">六</span>
                        <span class="text-xs text-gray-500">日</span>
                    </div>
                    <div id="week-days" class="flex justify-between mt-2 mb-4">
                        <!-- 日期将通过JS动态生成 -->
                    </div>
                </div>

                <!-- 分类筛选 -->
                <!-- <div class="flex overflow-x-auto space-x-2 mb-4 pb-2" id="category-filter"> -->
                    <!-- <button class="category-btn px-3 py-1 bg-green-600 text-white rounded-full text-sm whitespace-nowrap">全部学科</button> -->
                    <!-- 分类将通过JS动态生成 -->
                <!-- </div> -->

                <!-- 任务列表 -->
                <div id="task-list" class="min-h-0">
                    <!-- 任务将通过JS动态生成 -->
                    <div class="text-center text-gray-500 py-8">
                        暂无任务，点击右下角按钮添加
                    </div>
                </div>
            </div>

            <!-- 操作记录弹窗将通过JavaScript动态创建 -->

            <!-- 小心愿页面 -->
                <div id="wish-page" class="hidden">
                    <div class="bg-gradient-to-r from-yellow-50 to-orange-50 p-3 mb-3 rounded-lg shadow-sm">
                        <div class="flex items-center justify-between bg-white px-4 py-2 rounded-lg shadow-sm">
                            <div class="flex items-center">
                                <i class="fa fa-star text-yellow-500 mr-1.5 text-base"></i>
                                <span class="text-gray-600 mr-1.5">可用金币：</span>
                                <span id="wish-gold" class="text-yellow-500 font-bold">0</span>
                            </div>
                            <button id="exchange-history" class="text-xs bg-orange-100 text-orange-600 px-3 py-1 rounded-full hover:bg-orange-200 transition-colors duration-200">
                                领取记录
                            </button>
                        </div>
                    </div>
                    
                    <div id="wish-list" class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                    <!-- 心愿将通过JS动态生成 -->
                </div>
            </div>

            <!-- 我的页面 -->
                <div id="profile-page" class="hidden">
                    <!-- 用户信息编辑和退出按钮 -->
            <div class="bg-white rounded-lg shadow-md p-4 mb-3">
                <h3 class="font-bold text-gray-800 mb-2 text-base flex items-center">
                    <i class="fa fa-user-circle text-blue-500 mr-2"></i>账户管理
                </h3>
                <div class="space-y-1.5">
                    <button id="edit-profile" class="w-full flex justify-between items-center p-2.5 rounded-lg hover:bg-blue-50 transition-colors duration-200">
                        <div class="flex items-center">
                            <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-2.5">
                                <i class="fa fa-edit text-blue-600"></i>
                            </div>
                            <span class="font-medium">编辑个人信息</span>
                        </div>
                        <i class="fa fa-chevron-right text-gray-400"></i>
                    </button>
                    <button id="subaccount-management" class="w-full flex justify-between items-center p-2.5 rounded-lg hover:bg-green-50 transition-colors duration-200">
                        <div class="flex items-center">
                            <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center mr-2.5">
                                <i class="fa fa-user text-green-600"></i>
                            </div>
                            <span class="font-medium">子账号管理</span>
                        </div>
                        <i class="fa fa-chevron-right text-gray-400"></i>
                    </button>
                    <button id="logout" class="w-full flex justify-between items-center p-2.5 rounded-lg hover:bg-red-50 transition-colors duration-200">
                        <div class="flex items-center">
                            <div class="w-8 h-8 rounded-full bg-red-100 flex items-center justify-center mr-2.5">
                                <i class="fa fa-sign-out text-red-600"></i>
                            </div>
                            <span class="font-medium">退出登录</span>
                        </div>
                        <i class="fa fa-chevron-right text-gray-400"></i>
                    </button>
                </div>
            </div>

                    <!-- 荣誉系统 -->
            <div class="bg-white rounded-lg shadow-md p-4 mb-3">
                <h3 class="font-bold text-gray-800 mb-2 text-base flex items-center">
                    <i class="fa fa-star text-yellow-500 mr-2"></i>我的荣誉
                </h3>
                <div id="honor-list" style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; width: 100%;">
                <style>
                    #honor-list {
                        display: grid !important;
                        grid-template-columns: repeat(4, 1fr) !important;
                        gap: 12px !important;
                        width: 100% !important;
                        box-sizing: border-box !important;
                    }
                    
                    #honor-list > div {
                        width: 100% !important;
                        min-width: 0 !important;
                        box-sizing: border-box !important;
                    }
                    
                    @media (min-width: 640px) {
                        #honor-list {
                            grid-template-columns: repeat(5, 1fr) !important;
                        }
                    }
                    
                    @media (min-width: 768px) {
                        #honor-list {
                            grid-template-columns: repeat(6, 1fr) !important;
                        }
                    }
                    
                    @media (min-width: 1024px) {
                        #honor-list {
                            grid-template-columns: repeat(7, 1fr) !important;
                        }
                    }
                    
                    @media (min-width: 1280px) {
                        #honor-list {
                            grid-template-columns: repeat(8, 1fr) !important;
                        }
                    }
                </style>
                <!-- 荣誉将通过JS动态生成 -->
            </div>
        </div>

                <!-- 数据管理 -->
            <div class="bg-white rounded-lg shadow-md p-4 mb-3">
                <h3 class="font-bold text-gray-800 mb-2 text-base flex items-center">
                    <i class="fa fa-database text-green-500 mr-2"></i>数据管理
                </h3>
                <div class="space-y-1.5">
                    <button id="clear-data" class="w-full flex justify-between items-center p-2.5 rounded-lg hover:bg-orange-50 transition-colors duration-200">
                        <div class="flex items-center">
                            <div class="w-8 h-8 rounded-full bg-orange-100 flex items-center justify-center mr-2.5">
                                <i class="fa fa-trash text-orange-600"></i>
                            </div>
                            <span class="font-medium">清除数据</span>
                        </div>
                        <i class="fa fa-chevron-right text-gray-400"></i>
                    </button>
                    <button id="operation-logs" class="w-full flex justify-between items-center p-2.5 rounded-lg hover:bg-purple-50 transition-colors duration-200">
                        <div class="flex items-center">
                            <div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center mr-2.5">
                                <i class="fa fa-history text-purple-600"></i>
                            </div>
                            <span class="font-medium">操作记录</span>
                        </div>
                        <i class="fa fa-chevron-right text-gray-400"></i>
                    </button>
                </div>
            </div>
                    
                    <!-- 设置 -->
            <div class="bg-white rounded-lg shadow-md p-4 mb-3">
                <h3 class="font-bold text-gray-800 mb-2 text-base flex items-center">
                    <i class="fa fa-cog text-blue-500 mr-2"></i>设置
                </h3>
                <div class="space-y-1.5">
                    <!-- 番茄钟设置 -->
                    <button id="tomato-settings-btn" class="w-full p-2.5 rounded-lg hover:bg-blue-50 transition-colors duration-200 flex items-center justify-between">
                        <div class="flex items-center">
                            <div class="w-8 h-8 rounded-full bg-pink-100 flex items-center justify-center mr-2.5">
                                <i class="fa fa-clock-o text-pink-600"></i>
                            </div>
                            <span class="font-medium">番茄钟设置</span>
                        </div>
                        <i class="fa fa-chevron-right text-gray-400"></i>
                    </button>
                    
                    <!-- 任务设置 -->
                    <button id="task-settings-btn" class="w-full p-2.5 rounded-lg hover:bg-green-50 transition-colors duration-200 flex items-center justify-between">
                        <div class="flex items-center">
                            <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center mr-2.5">
                                <i class="fa fa-tasks text-green-600"></i>
                            </div>
                            <span class="font-medium">任务设置</span>
                        </div>
                        <i class="fa fa-chevron-right text-gray-400"></i>
                    </button>
                    
                    <!-- 朗读设置 -->
                    <button id="tts-settings-btn" class="w-full p-2.5 rounded-lg hover:bg-purple-50 transition-colors duration-200 flex items-center justify-between">
                        <div class="flex items-center">
                            <div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center mr-2.5">
                                <i class="fa fa-volume-up text-purple-600"></i>
                            </div>
                            <span class="font-medium">朗读设置</span>
                        </div>
                        <i class="fa fa-chevron-right text-gray-400"></i>
                    </button>
                    
                    <!-- 学科设置 -->
                    <button id="subject-settings-btn" class="w-full p-2.5 rounded-lg hover:bg-green-50 transition-colors duration-200 flex items-center justify-between">
                        <div class="flex items-center">
                            <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-2.5">
                                <i class="fa fa-book text-blue-600"></i>
                            </div>
                            <span class="font-medium">学科设置</span>
                        </div>
                        <i class="fa fa-chevron-right text-gray-400"></i>
                    </button>
                    
                    <!-- 金币设置 -->
                    <button id="gold-settings-btn" class="w-full p-2.5 rounded-lg hover:bg-yellow-50 transition-colors duration-200 flex items-center justify-between">
                        <div class="flex items-center">
                            <div class="w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center mr-2.5">
                                <i class="fa fa-coins text-yellow-600"></i>
                            </div>
                            <span class="font-medium">金币设置</span>
                        </div>
                        <i class="fa fa-chevron-right text-gray-400"></i>
                    </button>
                    
                    <!-- 关于 -->
                    <button id="about-btn" class="w-full p-2.5 rounded-lg hover:bg-blue-50 transition-colors duration-200 flex items-center justify-between">
                        <div class="flex items-center">
                            <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-2.5">
                                <i class="fa fa-info-circle text-blue-600"></i>
                            </div>
                            <span class="font-medium">关于</span>
                        </div>
                        <i class="fa fa-chevron-right text-gray-400"></i>
                    </button>
                </div>
            </div>
                </div>
            </div>
        </div>

        <!-- 关于页面模态窗口 -->
        <div id="about-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden overflow-y-auto">
            <div class="bg-white rounded-2xl w-full max-w-md max-h-[90vh] overflow-hidden flex flex-col mx-4">
                <!-- 弹窗头部 -->
                <div class="bg-green-600 text-white p-5 flex justify-between items-center">
                    <h3 class="text-xl font-bold">关于作业积分助手</h3>
                    <button id="close-about-modal" class="text-white hover:text-green-100">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                        </svg>
                    </button>
                </div>
                
                <!-- 弹窗内容 -->
                <div class="p-6 flex flex-col items-center">
                    <!-- 软件图标和名称 -->
                    <img id="app-icon" src="static/images/favicon/android-chrome-192x192.png" alt="作业积分助手" class="w-24 h-24 rounded-2xl mb-4 shadow-lg">
                    <h2 id="app-name" class="text-2xl font-bold text-green-600 mb-2">作业积分助手</h2>
                    <p id="app-version" class="text-gray-500 mb-6">版本 1.0.0</p>
                    
                    <!-- 功能介绍 -->
                    <div class="w-full mb-6">
                        <p id="app-description" class="text-gray-600 text-center mb-4">帮助学生培养良好的学习习惯和时间管理能力</p>
                    </div>
                    
                    <!-- 联系按钮 -->
                    <div class="w-full space-y-3">
                        <button id="xiaohongshu-btn" class="w-full bg-red-50 text-red-600 py-3 rounded-lg font-medium flex items-center justify-center hover:bg-red-100 transition-colors">
                            <i class="fa fa-heart mr-2"></i>
                            关注小红书
                        </button>
                        <button id="email-btn" class="w-full bg-blue-50 text-blue-600 py-3 rounded-lg font-medium flex items-center justify-center hover:bg-blue-100 transition-colors">
                            <i class="fa fa-envelope mr-2"></i>
                            邮件联系
                        </button>
                    </div>
                    
                    <!-- 底部版权信息 -->
                    <div class="mt-auto pt-6 text-center text-gray-400 text-sm">
                        <p>© 2025 任务积分助手</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 番茄钟设置模态窗口 -->
        <div id="tomato-settings-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
            <div class="bg-white rounded-lg shadow-lg w-5/6 max-w-md p-5">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-lg font-bold text-gray-800">番茄钟设置</h3>
                    <button id="close-tomato-settings" class="text-gray-400 hover:text-gray-600">
                        <i class="fa fa-times"></i>
                    </button>
                </div>
                <div class="space-y-6">
                    <div class="flex items-center justify-between">
                        <div>
                            <label class="flex items-center cursor-pointer">
                                <input type="checkbox" id="fixed-tomato-page" class="w-5 h-5 text-pink-600 rounded border-gray-300 focus:ring-pink-500">
                                <span class="ml-2 text-gray-700 font-medium">固定番茄钟页面</span>
                            </label>
                            <p class="text-sm text-gray-500 mt-1 ml-7">勾选后，番茄钟将保持全屏显示，不会缩小为悬浮球</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 朗读设置模态窗口 -->
        <div id="tts-settings-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
            <div class="bg-white rounded-lg shadow-lg w-5/6 max-w-md p-5">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-lg font-bold text-gray-800">朗读设置</h3>
                    <button id="close-tts-settings" class="text-gray-400 hover:text-gray-600">
                        <i class="fa fa-times"></i>
                    </button>
                </div>
                <div class="space-y-4 overflow-y-auto" style="max-height: 80vh;">
                    <div class="flex items-center justify-between">
                        <label class="flex items-center cursor-pointer">
                            <input type="checkbox" id="tts-enabled" class="mr-2">
                            <span class="text-gray-700">启用朗读</span>
                        </label>
                    </div>
                    <div>
                        <label class="block text-gray-700 font-medium mb-2">中文语音</label>
                        <select id="tts-zh-voice" class="w-full border border-gray-300 rounded-lg px-3 py-2"></select>
                        <p class="text-gray-400 text-xs mt-1">建议选择普通话（zh-CN）。</p>
                    </div>
                    <div>
                        <label class="block text-gray-700 font-medium mb-2">英文语音</label>
                        <select id="tts-en-voice" class="w-full border border-gray-300 rounded-lg px-3 py-2"></select>
                    </div>
                    <div class="flex items-center justify-between">
                        <label class="flex items-center cursor-pointer">
                            <input type="checkbox" id="tts-auto-lang" class="mr-2">
                            <span class="text-gray-700">自动识别语言</span>
                        </label>
                    </div>
                    <div>
                        <label class="block text-gray-700 font-medium mb-2">语速</label>
                        <input type="range" id="tts-rate" min="0.5" max="1.8" step="0.1" class="w-full">
                        <div class="text-gray-500 text-sm mt-1">当前：<span id="tts-rate-value">1.0</span></div>
                    </div>
                    <div>
                        <label class="block text-gray-700 font-medium mb-2">音调</label>
                        <input type="range" id="tts-pitch" min="0.5" max="2.0" step="0.1" class="w-full">
                        <div class="text-gray-500 text-sm mt-1">当前：<span id="tts-pitch-value">1.0</span></div>
                    </div>
                    <div class="flex gap-3">
                        <button id="tts-test-zh" class="flex-1 py-2 bg-green-100 text-green-700 rounded-lg hover:bg-green-200">试听中文</button>
                        <button id="tts-test-en" class="flex-1 py-2 bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200">试听英文</button>
                    </div>
                    <div class="flex justify-end gap-3">
                        <button id="cancel-tts-settings" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200">取消</button>
                        <button id="save-tts-settings" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700">保存</button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 金币设置模态窗口 -->
        <div id="gold-settings-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
            <div class="bg-white rounded-lg shadow-lg w-5/6 max-w-md p-5">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-lg font-bold text-gray-800">金币设置</h3>
                    <button id="close-gold-settings" class="text-gray-400 hover:text-gray-600">
                        <i class="fa fa-times"></i>
                    </button>
                </div>
                <div class="space-y-6">
                    <!-- 当前金币数量 -->
                    <div class="space-y-2">
                        <label class="block text-gray-700 font-medium">当前总金币</label>
                        <div id="current-gold-display" class="p-3 bg-yellow-50 rounded-lg border border-yellow-200 text-center text-yellow-600 font-bold text-xl">
                            0
                        </div>
                    </div>
                    
                    <!-- 新金币数量输入 -->
                    <div class="space-y-2">
                        <label for="new-gold-input" class="block text-gray-700 font-medium">设置新金币数量</label>
                        <input type="number" id="new-gold-input" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500">
                    </div>
                    
                    <!-- 修改原因 -->
                    <div class="space-y-2">
                        <label for="gold-reason-input" class="block text-gray-700 font-medium">修改原因 <span class="text-red-500">*</span></label>
                        <textarea id="gold-reason-input" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500" placeholder="请输入修改原因，至少2个字符"></textarea>
                    </div>
                    
                    <!-- 操作按钮 -->
                    <div class="flex space-x-3 pt-4">
                        <button id="cancel-gold-settings" class="flex-1 py-2 px-4 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
                            取消
                        </button>
                        <button id="save-gold-settings" class="flex-1 py-2 px-4 bg-yellow-600 text-white rounded-lg hover:bg-yellow-700 transition-colors">
                            保存修改
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 任务设置模态窗口 -->
        <div id="task-settings-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
            <div class="bg-white rounded-lg shadow-lg w-5/6 max-w-md p-5">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-lg font-bold text-gray-800">任务设置</h3>
                    <button id="close-task-settings" class="text-gray-400 hover:text-gray-600">
                        <i class="fa fa-times"></i>
                    </button>
                </div>
                <div class="space-y-6">
                    <div class="flex items-center justify-between">
                        <div>
                            <label class="flex items-center cursor-pointer">
                                <input type="checkbox" id="auto-sort-tasks" class="w-5 h-5 text-green-600 rounded border-gray-300 focus:ring-green-500">
                                <span class="ml-2 text-gray-700 font-medium">任务自动排序</span>
                            </label>
                            <p class="text-sm text-gray-500 mt-1 ml-7">勾选后，学科下已完成任务排下方，所有任务完成的学科排在有未完成任务的学科下方</p>
                        </div>
                    </div>
                    <div class="flex items-center justify-between">
                        <div>
                            <label class="flex items-center cursor-pointer">
                                <input type="checkbox" id="auto-migrate-tasks" class="w-5 h-5 text-green-600 rounded border-gray-300 focus:ring-green-500">
                                <span class="ml-2 text-gray-700 font-medium">未完成任务自动迁移</span>
                            </label>
                            <p class="text-sm text-gray-500 mt-1 ml-7">勾选后，系统会自动将历史未完成的任务迁移到今天，并标记为迁移任务，将不能创建历史未完成任务</p>
                        </div>
                    </div>
                </div>
                <div class="mt-6 flex justify-end">
                    <button id="save-task-settings" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors">
                        保存设置
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 子账号管理模态窗口 -->
        <div id="subaccount-management-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden overflow-y-auto">
            <div class="bg-white rounded-2xl w-full max-w-2xl max-h-[90vh] overflow-hidden flex flex-col mx-4" style="height: auto;">
                <!-- 弹窗头部 -->
                <div class="bg-green-600 text-white p-5 flex justify-between items-center">
                    <h3 class="text-xl font-bold">子账号管理</h3>
                    <button id="close-subaccount-modal" class="text-white hover:text-green-100 p-1 rounded-full hover:bg-green-700 transition-colors">
                        <i class="fa fa-times text-xl"></i>
                    </button>
                </div>
                
                <!-- 弹窗内容 - 可滚动区域 -->
                <div class="p-6 flex flex-col flex-grow overflow-y-auto" style="max-height: calc(90vh - 120px);">
                    <!-- 子账号列表 -->
                    <div>
                        <h4 class="text-lg font-semibold mb-4">子账号列表</h4>
                        <div id="subaccount-list" class="space-y-3">
                            <!-- 子账号列表将通过JS动态生成 -->
                            <div class="text-center text-gray-500 py-6">
                                暂无子账号
                            </div>
                        </div>
                    </div>
                    
                    <!-- 创建子账号表单 -->
                    <div class="bg-gray-50 p-5 rounded-lg mt-6">
                        <h4 class="text-lg font-semibold mb-4">创建子账号</h4>
                        
                        <!-- 头像选择 -->
                        <div class="mb-4">
                            <label class="block text-gray-700 font-medium mb-2">头像</label>
                            <div class="flex items-center">
                                <div id="subaccount-avatar-preview" class="w-16 h-16 rounded-full bg-gray-200 overflow-hidden mr-4 flex items-center justify-center">
                                    <i class="fa fa-user text-gray-400 text-2xl"></i>
                                </div>
                                <div>
                                    <button id="subaccount-select-avatar" class="px-4 py-2 bg-green-100 text-green-700 rounded-lg hover:bg-green-200 transition-colors">
                                        选择头像
                                    </button>
                                    <input type="file" id="subaccount-avatar-input" class="hidden" accept="image/*">
                                </div>
                            </div>
                        </div>
                        
                        <!-- 昵称输入 -->
                        <div class="mb-4">
                            <label for="subaccount-nickname" class="block text-gray-700 font-medium mb-2">昵称</label>
                            <input type="text" id="subaccount-nickname" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500" placeholder="请输入昵称">
                        </div>
                        
                        <!-- 用户名输入 -->
                        <div class="mb-4">
                            <label for="subaccount-username" class="block text-gray-700 font-medium mb-2">用户名 <span class="text-red-500">*</span></label>
                            <input type="text" id="subaccount-username" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500" placeholder="请输入用户名（用于登录）">
                            <p id="subaccount-username-error" class="text-red-500 text-sm mt-1 hidden">用户名已存在或格式不正确，请更换</p>
                        </div>
                        
                        <!-- 密码输入 -->
                        <div class="mb-4">
                            <label for="subaccount-password" class="block text-gray-700 font-medium mb-2">密码 <span class="text-red-500">*</span></label>
                            <input type="password" id="subaccount-password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500" placeholder="请输入密码">
                        </div>
                        
                        <!-- 密码确认输入 -->
                        <div class="mb-4">
                            <label for="subaccount-password-confirm" class="block text-gray-700 font-medium mb-2">确认密码 <span class="text-red-500">*</span></label>
                            <input type="password" id="subaccount-password-confirm" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500" placeholder="请再次输入密码">
                            <p id="subaccount-password-error" class="text-red-500 text-sm mt-1 hidden">两次输入的密码不一致</p>
                        </div>
                        
                        <!-- 权限设置 -->
                        <div class="mb-4">
                            <label class="block text-gray-700 font-medium mb-2">权限设置</label>
                            <div class="flex space-x-4">
                                <label class="flex items-center cursor-pointer">
                                    <input type="radio" name="subaccount-permission" value="view" class="w-5 h-5 text-green-600 rounded border-gray-300 focus:ring-green-500" checked>
                                    <span class="ml-2 text-gray-700">仅查看</span>
                                </label>
                                <label class="flex items-center cursor-pointer">
                                    <input type="radio" name="subaccount-permission" value="edit" class="w-5 h-5 text-green-600 rounded border-gray-300 focus:ring-green-500">
                                    <span class="ml-2 text-gray-700">可编辑</span>
                                </label>
                            </div>
                        </div>
                        
                        <!-- 创建按钮 -->
                        <button id="create-subaccount-btn" class="w-full py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors font-medium">
                            创建子账号
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 学科设置模态窗口 -->
        <div id="subject-settings-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
            <div class="bg-white rounded-lg shadow-lg w-5/6 max-w-md max-h-[90vh] flex flex-col" style="height: auto; min-height: 40vh;">
                <div class="p-5 border-b">
                    <div class="flex justify-between items-center">
                        <h3 class="text-lg font-bold text-gray-800">学科设置</h3>
                        <button id="close-subject-settings" class="text-gray-400 hover:text-gray-600">
                            <i class="fa fa-times"></i>
                        </button>
                    </div>
                </div>
                
                <!-- 可滚动内容区域 -->
                <div class="p-5 overflow-y-auto flex-grow" style="max-height: 60vh;">
                    <div class="mb-4">
                        <h4 class="text-md font-semibold text-gray-700 mb-3">已添加的学科</h4>
                        <div id="subjects-list" class="space-y-3">
                            <!-- 学科列表将通过JavaScript动态生成 -->
                        </div>
                    </div>
                    
                    <div class="border-t pt-4">
                        <h4 class="text-md font-semibold text-gray-700 mb-3">添加新学科</h4>
                        <div class="flex space-x-2">
                            <input type="text" id="new-subject-name" placeholder="学科名称" 
                                class="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <input type="color" id="new-subject-color" value="#3b82f6" 
                                class="w-10 h-10 border border-gray-300 rounded-lg cursor-pointer">
                            <button id="add-subject-btn" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
                                添加
                            </button>
                        </div>
                    </div>
                </div>
                
                <div class="p-5 border-t">
                    <div class="text-sm text-gray-500">
                        <i class="fa fa-info-circle text-blue-500 mr-1"></i>
                        提示：内置学科不能删除，修改学科名称会同步更新所有相关任务
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部导航栏 -->
        <div id="bottom-nav" class="fixed bottom-0 left-0 right-0 bg-white border-t-2 border-green-100 flex justify-around p-1 shadow-lg">
            <button class="nav-item flex flex-col items-center nav-item-active p-1 rounded-xl transition-all duration-300" data-page="task">
                <div class="w-8 h-8 flex items-center justify-center rounded-full bg-green-100 text-green-600 text-lg">
                    <i class="fa fa-check-circle"></i>
                </div>
                <span class="text-xs mt-0.5 font-medium">作业打卡</span>
            </button>
            <button class="nav-item flex flex-col items-center p-1 rounded-xl transition-all duration-300" data-page="wish">
                <div class="w-8 h-8 flex items-center justify-center rounded-full bg-yellow-100 text-yellow-600 text-lg">
                    <i class="fa fa-gift"></i>
                </div>
                <span class="text-xs mt-0.5 font-medium">小心愿</span>
            </button>
            <button class="nav-item flex flex-col items-center p-1 rounded-xl transition-all duration-300" data-page="profile">
                <div class="w-8 h-8 flex items-center justify-center rounded-full bg-blue-100 text-blue-600 text-lg">
                    <i class="fa fa-user"></i>
                </div>
                <span class="text-xs mt-0.5 font-medium">我的</span>
            </button>
        </div>

        <!-- 添加任务按钮 -->
        <div class="floating-btn" id="add-task-btn">
            <i class="fa fa-plus"></i>
        </div>
    
        <!-- 番茄钟弹窗 -->
        <div id="tomato-modal" class="hidden fixed inset-0 bg-blue-50 flex items-center justify-center z-50">
            <div class="relative w-11/12 max-w-md">
                <div class="bg-white rounded-2xl p-5 relative shadow-2xl border-2 border-pink-50" style="background: linear-gradient(180deg,#fff6f6,#fffdf8); position:relative; z-index:70; overflow:visible; padding-bottom:18px;">
                    <button id="tomato-close" class="absolute top-3 right-3 text-gray-600 bg-white/80 rounded-full p-2" style="box-shadow:0 4px 12px rgba(0,0,0,0.08);">✕</button>
                    <!-- 左上角番茄图标 -->
                    <div style="position:absolute;left:14px;top:14px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,0.85);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 12px rgba(0,0,0,0.06);">
                        <img src="static/images/番茄钟.png" alt="番茄" style="width:28px;height:28px;object-fit:contain;" />
                    </div>
                    <h3 id="tomato-task-name" class="text-2xl font-extrabold text-pink-600 mb-2" style="font-family: 'Comic Sans MS', 'Microsoft YaHei', cursive; padding-left:44px;">让我们开始吧！</h3>
                    <div id="tomato-timer" class="text-8xl font-mono text-center mb-3" style="color:#ff4d6d; text-shadow:0 4px 10px rgba(255,77,109,0.15);">20:00</div>

                    <!-- 计时模式选择 -->
                    <div class="flex justify-center gap-4 mb-3">
                    <button id="tomato-countdown-mode" class="px-4 py-2 rounded-full bg-pink-100 text-pink-700 font-semibold shadow-sm">
                        <i class="fa fa-clock-o mr-1"></i>倒计时
                    </button>
                    <button id="tomato-stopwatch-mode" class="px-4 py-2 rounded-full bg-blue-50 text-blue-600 font-semibold shadow-sm">
                        <i class="fa fa-play mr-1"></i>正计时
                    </button>
                </div>
                
                <!-- 倒计时时间选择（默认显示） -->
                <div id="tomato-countdown-options" class="flex justify-center gap-3 mb-3">
                        <button class="tomato-time-option px-4 py-2 rounded-full bg-pink-50 text-pink-600 font-semibold shadow-sm" data-minutes="15">15</button>
                        <button class="tomato-time-option px-4 py-2 rounded-full bg-pink-100 text-pink-700 font-semibold shadow-sm" data-minutes="20">20</button>
                        <button class="tomato-time-option px-4 py-2 rounded-full bg-pink-50 text-pink-600 font-semibold shadow-sm" data-minutes="25">25</button>
                        <input id="tomato-custom-minutes" type="number" min="1" class="w-24 px-3 py-2 border rounded-full text-center" value="20" style="border-color:rgba(255,105,135,0.25);">
                    </div>

                    <div class="relative h-40 bg-white/30 rounded overflow-hidden border flex flex-col items-center justify-center">
                        <!-- 小熊猫陪伴学习图片 -->
                        <img src="static/images/others/陪伴学习-熊猫.png" alt="小熊猫陪伴学习" class="w-24 h-24 object-contain mb-1" />
                        <!-- 鼓励专注的文字 -->
                        <p class="text-center text-pink-600 font-medium text-sm">小熊猫正在认真陪伴你学习呢！保持专注，你最棒！</p>
                    </div>

                    <div class="w-full flex justify-center items-center gap-4 mt-4">
                        <button id="tomato-start" class="tomato-btn unified px-5 py-3" style="background:linear-gradient(135deg,#ff6b6b,#ff9a8b);color:#fff;">开始</button>
                        <button id="tomato-pause" class="tomato-btn unified px-5 py-3" style="background:#fff;border:2px solid rgba(255,105,135,0.2);color:#ff6b6b;">暂停</button>
                        <button id="tomato-finish" class="tomato-btn unified px-5 py-3" style="background:linear-gradient(135deg,#ff8a65,#ff4957);color:#fff;">结束</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 悬浮番茄球（默认隐藏，开始后显示） -->
          <div id="tomato-bubble" class="hidden" style="position:fixed;bottom:70px;left:50%;transform:translateX(-50%);width:84px;height:84px;border-radius:50%;background:linear-gradient(135deg,#a5d8ff,#74c0fc);color:white;z-index:60;box-shadow:0 10px 30px rgba(116,192,252,0.28);border:4px solid rgba(255,255,255,0.6);overflow:hidden;">
                 <div id="bubble-fill" style="position:absolute;bottom:0;left:0;right:0;height:0%;background:linear-gradient(180deg,#a5d8ff,#74c0fc);opacity:0.95;transition:height 0.4s; border-radius:0 0 50% 50%;"></div>
                 <div style="position:relative;z-index:10;text-align:center;display:flex;align-items:center;justify-content:center;height:100%;">
                     <div id="bubble-timer" style="font-size:16px;font-weight:800;line-height:1;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,0.25);">20:00</div>
                 </div>
        </div>
    <style>
        /* 自定义儿童友好样式 */
        .nav-item-active {
            color: #22c55e;
        }
        .nav-item-active div {
            background-color: #22c55e;
            color: white;
        }
        
        /* 确保hidden类能正确隐藏元素 */
        .hidden {
            display: none !important;
        }
        
        /* 操作记录弹窗特定样式，确保默认隐藏 */
        #operation-logs-modal {
            display: none !important;
        }
        
        #operation-logs-modal:not(.hidden) {
            display: block !important;
        }
        .task-card {
            border-radius: 12px;
            background: linear-gradient(145deg, #ffffff, #f0f0f0);
            box-shadow: 0 4px 8px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.05);
            border: 2px solid transparent;
            transition: all 0.3s ease;
        }

        /* 番茄钟按钮统一样式 */
        .tomato-btn {
            border-radius: 9999px;
            font-weight: 800;
            min-width: 100px;
            padding-left: 18px;
            padding-right: 18px;
            box-shadow: 0 8px 24px rgba(255,99,120,0.12);
            border: none;
            font-size: 14px;
        }
        .tomato-btn.unified { 
            display: inline-flex; 
            align-items: center; 
            justify-content: center;
        }
        .task-card:hover, .task-card:active {
            transform: translateY(-2px);
            border-color: #22c55e;
        }
        .task-page-header, .wish-page-header, .profile-page-header {
            background: linear-gradient(135deg, #22c55e, #10b981);
            color: white;
            padding: 1.5rem !important;
        }
        .task-page-header h1, .wish-page-header h1, .profile-page-header h1 {
            color: white;
        }
        .card-shadow {
            border-radius: 16px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.08);
            transition: all 0.3s ease;
        }
        .card-shadow:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 32px rgba(0,0,0,0.12);
        }
        .floating-btn {
            background: linear-gradient(135deg, #ef4444, #dc2626);
            border: 4px solid white;
        }
        .stat-item {
            animation: bounceIn 0.6s ease-out;
        }
        @keyframes bounceIn {
            0% { transform: scale(0.8); opacity: 0; }
            70% { transform: scale(1.1); }
            100% { transform: scale(1); opacity: 1; }
        }
        /* 周视图样式 */
        #week-days button {
            transition: all 0.3s ease;
        }
        #week-days button:hover {
            transform: scale(1.1);
        }
        /* 按钮通用样式 */
        button {
            transition: all 0.2s ease;
        }
        button:active {
            transform: scale(0.95);
        }
    </style>
    </div>

    <!-- 添加任务弹窗 -->
    <div id="add-task-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-start justify-center z-50 hidden overflow-y-auto pt-4">
        <div class="bg-white rounded-xl w-full max-w-md p-6 shadow-xl max-h-[90vh] overflow-y-auto transform transition-all duration-300">
            <div class="flex items-center justify-between mb-6">
                <h3 id="modal-title" class="text-xl font-bold text-indigo-600">添加任务</h3>
                <button type="button" id="close-modal" class="text-gray-500 hover:text-gray-700 focus:outline-none">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            </div>
            
            <!-- 添加任务标签页 -->
            <div class="border-b border-gray-200 mb-5">
                <nav class="flex -mb-px space-x-8" aria-label="Tabs">
                    <button id="single-add-tab" class="inline-flex items-center justify-center py-4 px-1 border-b-2 border-indigo-500 text-sm font-medium text-indigo-600 whitespace-nowrap" data-tab="single">
                        <i class="fa fa-plus-circle mr-2"></i>
                        单个添加
                    </button>
                    <button id="batch-add-tab" class="inline-flex items-center justify-center py-4 px-1 border-b-2 border-transparent text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap" data-tab="batch">
                        <i class="fa fa-list-ul mr-2"></i>
                        批量添加
                    </button>
                </nav>
            </div>
            
            <!-- 单个添加内容 -->
            <div id="single-add-content" class="tab-content block">
            <form id="task-form" class="space-y-5">
                <div>
                    <label for="task-name" class="block text-sm font-medium text-gray-700 mb-1">任务名称</label>
                    <input type="text" id="task-name" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors" placeholder="请输入任务名称">
                </div>
                <div>
                    <label for="task-description" class="block text-sm font-medium text-gray-700 mb-1">任务描述</label>
                    <textarea id="task-description" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors" placeholder="请输入任务描述" rows="3"></textarea>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">任务图片</label>
                    <div id="task-images-container" class="border-2 border-dashed border-gray-300 rounded-lg p-2 text-center hover:border-indigo-500 transition-colors cursor-pointer">
                        <input type="file" id="task-images-upload" multiple accept="image/*" class="hidden">
                        <div class="py-2">
                            <i class="fa fa-image text-xl text-gray-400 mb-1"></i>
                            <p class="text-xs text-gray-500">上传图片（多张）</p>
                            <p class="text-xs text-gray-400 mt-0.5">支持 JPG、PNG、GIF</p>
                        </div>
                    </div>
                    <div id="uploaded-images-preview" class="grid grid-cols-3 gap-2 mt-3 hidden"></div>
                </div>
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label for="task-category" class="block text-sm font-medium text-gray-700 mb-1">学科分类</label>
                        <select id="task-category" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors">
                            <!-- 分类选项将通过JS动态生成 -->
                        </select>
                    </div>
                    <div>
                        <label for="task-time" class="block text-sm font-medium text-gray-700 mb-1">计划时长（分钟）</label>
                        <input type="number" id="task-time" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors" value="10" min="1">
                    </div>
                </div>
                <div>
                    <label for="task-points" class="block text-sm font-medium text-gray-700 mb-1">奖励金币</label>
                    <input type="number" id="task-points" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors" value="1" min="-99" max="99">
                </div>
                
                <!-- 重复设置 - 单独一行，优化移动端显示 -->
                <div class="space-y-3">
                    <label class="block text-sm font-medium text-gray-700">重复设置</label>
                    
                    <!-- 基础重复选项 -->
                    <div class="flex flex-wrap gap-3">
                        <label class="inline-flex items-center px-3 py-1.5 bg-indigo-600 text-white rounded-full text-sm hover:bg-indigo-700 transition-colors cursor-pointer">
                            <input type="checkbox" id="repeat-none" name="task-repeat" value="无" class="mr-2 text-white focus:ring-white border-gray-300 rounded-full" checked>
                            <span>无</span>
                        </label>
                        <label class="inline-flex items-center px-3 py-1.5 bg-gray-100 rounded-full text-sm hover:bg-gray-200 transition-colors cursor-pointer">
                            <input type="checkbox" id="repeat-daily" name="task-repeat" value="每天" class="mr-2 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded-full">
                            <span>每天</span>
                        </label>
                        <label class="inline-flex items-center px-3 py-1.5 bg-gray-100 rounded-full text-sm hover:bg-gray-200 transition-colors cursor-pointer">
                            <input type="checkbox" id="repeat-weekday" name="task-repeat" value="每个工作日" class="mr-2 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded-full">
                            <span>每个工作日</span>
                        </label>
                    </div>
                    
                    <!-- 每周选择 - 按要求格式显示 -->
                    <div>
                        <div class="inline-flex items-center text-sm text-gray-700 mr-2 mb-1">每周：</div>
                        <div class="flex flex-wrap gap-2">
                            <label class="inline-flex items-center justify-center w-8 h-8 bg-gray-100 rounded-full hover:bg-gray-200 transition-colors cursor-pointer">
                                <input type="checkbox" id="repeat-mon" name="task-repeat" value="每周一" class="sr-only">
                                <span class="text-sm">一</span>
                            </label>
                            <label class="inline-flex items-center justify-center w-8 h-8 bg-gray-100 rounded-full hover:bg-gray-200 transition-colors cursor-pointer">
                                <input type="checkbox" id="repeat-tue" name="task-repeat" value="每周二" class="sr-only">
                                <span class="text-sm">二</span>
                            </label>
                            <label class="inline-flex items-center justify-center w-8 h-8 bg-gray-100 rounded-full hover:bg-gray-200 transition-colors cursor-pointer">
                                <input type="checkbox" id="repeat-wed" name="task-repeat" value="每周三" class="sr-only">
                                <span class="text-sm">三</span>
                            </label>
                            <label class="inline-flex items-center justify-center w-8 h-8 bg-gray-100 rounded-full hover:bg-gray-200 transition-colors cursor-pointer">
                                <input type="checkbox" id="repeat-thu" name="task-repeat" value="每周四" class="sr-only">
                                <span class="text-sm">四</span>
                            </label>
                            <label class="inline-flex items-center justify-center w-8 h-8 bg-gray-100 rounded-full hover:bg-gray-200 transition-colors cursor-pointer">
                                <input type="checkbox" id="repeat-fri" name="task-repeat" value="每周五" class="sr-only">
                                <span class="text-sm">五</span>
                            </label>
                            <label class="inline-flex items-center justify-center w-8 h-8 bg-gray-100 rounded-full hover:bg-gray-200 transition-colors cursor-pointer">
                                <input type="checkbox" id="repeat-sat" name="task-repeat" value="每周六" class="sr-only">
                                <span class="text-sm">六</span>
                            </label>
                            <label class="inline-flex items-center justify-center w-8 h-8 bg-gray-100 rounded-full hover:bg-gray-200 transition-colors cursor-pointer">
                                <input type="checkbox" id="repeat-sun" name="task-repeat" value="每周日" class="sr-only">
                                <span class="text-sm">日</span>
                            </label>
                        </div>
                    </div>
                </div>
                <div class="space-y-4">
                    <div>
                        <label for="task-date" class="block text-sm font-medium text-gray-700 mb-1">开始日期</label>
                        <input type="date" id="task-date" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors">
                    </div>
                    <div>
                        <label for="task-end-date" class="block text-sm font-medium text-gray-700 mb-1">结束日期（可选）</label>
                        <input type="date" id="task-end-date" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors">
                    </div>
                </div>
                <div class="flex space-x-4 pt-4">
                    <button type="button" id="cancel-task" class="flex-1 px-4 py-2.5 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors font-medium">取消</button>
                    <button type="submit" class="flex-1 px-4 py-2.5 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors font-medium shadow-md hover:shadow-lg">保存任务</button>
                </div>
            </form>
            </div>
            
            <!-- 批量添加内容 -->
            <div id="batch-add-content" class="tab-content hidden space-y-5">
                <div>
                    <label for="batch-task-content" class="block text-sm font-medium text-gray-700 mb-1">作业文本</label>
                    <textarea id="batch-task-content" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors" placeholder="请输入老师布置的当天作业，包含多个内容项：
 语文 
 1. 朗读课文 
 2. 写今日汉字 
 数学 
 1. 每日计算完成1页" rows="6"></textarea>
                </div>
                
                <button type="button" id="recognize-tasks-btn" class="w-full px-4 py-2.5 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors font-medium flex items-center justify-center">
                    <i class="fa fa-magic mr-2"></i>
                    智能识别
                </button>
                
                <div id="recognition-results" class="border border-gray-200 rounded-lg p-3 hidden">
                    <h4 class="font-medium text-gray-700 mb-2 flex items-center">
                        <i class="fa fa-check-circle text-green-500 mr-2"></i>
                        识别结果
                    </h4>
                    <div id="recognized-tasks-list" class="space-y-2 max-h-60 overflow-y-auto">
                        <!-- 识别的任务将在这里动态生成 -->
                    </div>
                    <p class="text-xs text-gray-500 mt-2">点击任务可以进一步编辑</p>
                </div>
                
                <div class="flex space-x-4 pt-4">
                    <button type="button" id="cancel-batch-task" class="flex-1 px-4 py-2.5 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors font-medium">取消</button>
                    <button type="button" id="add-selected-tasks-btn" class="flex-1 px-4 py-2.5 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors font-medium shadow-md hover:shadow-lg" disabled>
                        添加选中任务
                    </button>
                </div>
            </div>
        </div>
    </div>

    
    <!-- 编辑个人信息弹窗 -->
    <div id="edit-profile-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-start justify-center z-50 hidden overflow-y-auto">
        <div class="bg-white rounded-lg p-6 w-full max-w-md max-h-[90vh] mx-4 my-8 overflow-y-auto flex flex-col">
            <h3 class="text-lg font-bold mb-4">编辑个人信息</h3>
            <form id="edit-profile-form">
                <!-- 头像选择 -->
                <div class="mb-4">
                    <label class="block text-gray-700 mb-2">头像</label>
                    <div class="flex items-center mb-2">
                        <img id="current-avatar" src="static/images/avatars/default.svg" alt="当前头像" class="w-16 h-16 rounded-full mr-4 border-2 border-green-500">
                        <button type="button" id="change-avatar-btn" class="px-3 py-1 bg-green-600 text-white rounded-lg text-sm">更换头像</button>
                    </div>
                    <!-- 头像选择器 (隐藏) -->
                    <div id="avatar-selector" class="hidden grid grid-cols-5 gap-2 mt-2">
                        <!-- 头像选项将由JavaScript动态生成 -->
                    </div>
                    <input type="hidden" id="avatar" value="default.svg">
                </div>
                
                <!-- 昵称 -->
                <div class="mb-4">
                    <label for="nickname" class="block text-gray-700 mb-2">昵称</label>
                    <input type="text" id="nickname" name="nickname" class="w-full px-4 py-2 border border-gray-300 rounded-lg">
                </div>
                
                <!-- 手机号 -->
                <div class="mb-4">
                    <label for="phone" class="block text-gray-700 mb-2">手机号</label>
                    <input type="tel" id="phone" name="phone" class="w-full px-4 py-2 border border-gray-300 rounded-lg">
                </div>
                
                <!-- 修改密码 -->
                <div class="mb-4">
                    <label class="block text-gray-700 mb-2">修改密码（选填）</label>
                    <input type="password" id="current-password" name="current-password" placeholder="当前密码" class="w-full px-4 py-2 border border-gray-300 rounded-lg mb-2">
                    <input type="password" id="new-password" name="new-password" placeholder="新密码" class="w-full px-4 py-2 border border-gray-300 rounded-lg mb-2">
                    <input type="password" id="confirm-password" name="confirm-password" placeholder="确认新密码" class="w-full px-4 py-2 border border-gray-300 rounded-lg">
                </div>
                
                <!-- 按钮 -->
                <div class="flex justify-end gap-3">
                    <button type="button" id="cancel-edit-profile" class="px-4 py-2 border border-gray-300 rounded-lg">取消</button>
                    <button type="submit" class="px-4 py-2 bg-green-600 text-white rounded-lg">保存</button>
                </div>
            </form>
        </div>
    </div>

    

    <!-- 荣誉墙弹窗 -->
    <div id="honor-wall-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden overflow-y-auto">
        <div class="bg-white rounded-2xl w-full max-w-3xl max-h-[90vh] overflow-hidden flex flex-col">
            <!-- 弹窗头部 -->
            <div class="bg-yellow-500 text-white p-5 flex justify-between items-center">
                <h3 class="text-2xl font-bold">我的荣誉墙</h3>
                <button id="close-honor-wall" class="text-white hover:text-yellow-100">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            </div>
            
            <!-- 荣誉墙内容 -->
            <div class="p-5 overflow-y-auto flex-1">
                <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3" id="honor-wall-content">
                    <!-- 荣誉将通过JS动态生成 -->
                </div>
            </div>
            
            <!-- 荣誉分类筛选 -->
            <div class="bg-gray-50 p-4 border-t">
                <div class="flex flex-wrap gap-2 justify-center">
                    <button class="honor-filter-btn px-4 py-2 rounded-full bg-yellow-100 text-yellow-800 font-medium text-sm active" data-filter="all">全部荣誉</button>
                    <button class="honor-filter-btn px-4 py-2 rounded-full bg-gray-100 text-gray-600 font-medium text-sm" data-filter="obtained">已获得</button>
                    <button class="honor-filter-btn px-4 py-2 rounded-full bg-gray-100 text-gray-600 font-medium text-sm" data-filter="unobtained">未获得</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 荣誉获得庆祝弹窗 -->
    <div id="honor-celebration-modal" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 hidden">
        <div class="bg-gradient-to-r from-amber-500 to-yellow-400 rounded-3xl p-8 text-center text-white max-w-md mx-4 transform transition-all duration-500 scale-90 opacity-0" id="celebration-content">
            <div class="mb-4 flex justify-center">
                <div class="w-24 h-24 bg-white rounded-full flex items-center justify-center shadow-lg">
                    <i class="fa fa-trophy text-4xl text-yellow-500"></i>
                </div>
            </div>
            <h3 class="text-3xl font-bold mb-2" id="celebration-honor-name">恭喜获得新荣誉！</h3>
            <p class="text-lg mb-6" id="celebration-honor-desc">你完成了一项了不起的成就</p>
            <button id="close-celebration" class="bg-white text-yellow-600 px-6 py-3 rounded-full font-bold text-lg shadow-lg hover:bg-yellow-50 transition-colors">
                太棒了！
            </button>
        </div>
    </div>

    <script type="module" src="js/api.js"></script>
    <script type="module" src="js/utils.js"></script>
    <script type="module" src="js/app.js"></script>
    <script type="module" src="js/taskTabs.js"></script>
    <script type="module" src="js/subaccountManager.js"></script>
    <script type="module" src="js/pullToRefresh.js"></script>
    <script src="js/pwa.js"></script>

    <!-- 修改子账号模态窗口 -->
    <div id="edit-subaccount-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden overflow-y-auto">
        <div class="bg-white rounded-2xl w-full max-w-2xl max-h-[90vh] overflow-hidden flex flex-col mx-4">
            <!-- 弹窗头部 -->
            <div class="bg-green-600 text-white p-5 flex justify-between items-center">
                <h3 class="text-xl font-bold">修改子账号</h3>
                <button id="close-edit-subaccount-modal" class="text-white hover:text-green-100 p-1 rounded-full hover:bg-green-700 transition-colors">
                    <i class="fa fa-times text-xl"></i>
                </button>
            </div>
            
            <!-- 弹窗内容 -->
            <div class="p-6 overflow-y-auto" style="max-height: calc(90vh - 80px);">
                <input type="hidden" id="edit-subaccount-id">
                
                <!-- 昵称 -->
                <div class="mb-4">
                    <label for="edit-subaccount-nickname" class="block text-gray-700 font-medium mb-2">昵称</label>
                    <input type="text" id="edit-subaccount-nickname" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500">
                </div>
                
                <!-- 权限设置 -->
                <div class="mb-4">
                    <label class="block text-gray-700 font-medium mb-2">权限设置</label>
                    <div class="flex space-x-4">
                        <label class="flex items-center cursor-pointer">
                            <input type="radio" name="edit-subaccount-permission" value="view" class="w-5 h-5 text-green-600 rounded border-gray-300 focus:ring-green-500">
                            <span class="ml-2 text-gray-700">仅查看</span>
                        </label>
                        <label class="flex items-center cursor-pointer">
                            <input type="radio" name="edit-subaccount-permission" value="edit" class="w-5 h-5 text-green-600 rounded border-gray-300 focus:ring-green-500">
                            <span class="ml-2 text-gray-700">可编辑</span>
                        </label>
                    </div>
                </div>
                
                <!-- 头像 -->
                <div class="mb-4">
                    <label class="block text-gray-700 font-medium mb-2">头像</label>
                    <div class="flex items-center">
                        <div id="edit-subaccount-avatar-preview" class="w-16 h-16 rounded-full bg-gray-200 overflow-hidden mr-4 flex items-center justify-center">
                            <i class="fa fa-user text-gray-400 text-2xl"></i>
                        </div>
                        <div>
                            <button type="button" id="edit-subaccount-select-avatar" class="px-4 py-2 bg-green-100 text-green-700 rounded-lg hover:bg-green-200 transition-colors">选择头像</button>
                            <input type="file" id="edit-subaccount-avatar-input" accept="image/*" class="hidden">
                        </div>
                    </div>
                </div>
                
                <!-- 按钮 -->
                <div class="flex justify-end gap-3 mt-6">
                    <button id="cancel-edit-subaccount" class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-100 transition-colors">取消</button>
                    <button id="save-edit-subaccount" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors">保存修改</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 图片查看器弹窗 -->
    <div id="image-viewer-modal" class="fixed inset-0 bg-black bg-opacity-90 z-50 hidden flex items-center justify-center">
        <div class="relative w-full max-h-[90vh]">
            <button id="close-image-viewer" class="absolute -top-10 right-2 text-white text-2xl hover:text-gray-300 transition-colors">
                <i class="fa fa-times"></i>
            </button>
            
            <div class="relative flex items-center justify-center">
                <img id="current-task-image" src="" alt="任务图片" class="w-full h-auto max-h-[80vh] object-contain mx-auto">
                
                <!-- 左右翻页按钮 -->
                <button id="prev-image-btn" class="absolute left-1 top-1/2 -translate-y-1/2 bg-white bg-opacity-50 hover:bg-opacity-70 text-black w-8 h-8 rounded-full flex items-center justify-center transition-colors">
                    <i class="fa fa-chevron-left"></i>
                </button>
                <button id="next-image-btn" class="absolute right-1 top-1/2 -translate-y-1/2 bg-white bg-opacity-50 hover:bg-opacity-70 text-black w-8 h-8 rounded-full flex items-center justify-center transition-colors">
                    <i class="fa fa-chevron-right"></i>
                </button>
                
                <!-- 图片计数器 -->
                <div id="image-counter" class="absolute bottom-1 left-1/2 -translate-x-1/2 bg-black bg-opacity-70 text-white px-2 py-0.5 rounded-full text-xs">
                    1/1
                </div>
            </div>
        </div>
    </div>
</body>
<!-- 备注弹窗脚本 -->
<script type="module" src="static/js/remarkModal.js"></script>
</html>